<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>跟着b站视频学习H5</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
        height: 100%;
        width: 100%;
        }
        #canvas {
            border: 1px black solid;
        }
        div {
            background: #ff0;
            margin-bottom: 20px;
        }
        span {
            background: #f00;
            font-size: 24px
        }
        a {
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body bgcolor= "#fafafa">
    计科学院食品
    hello
    <h1 align = "center">这是标题1</h1>
    <h2>这是标题2</h2>
    <h3>这是标题3</h3>
    <h4>这是标题4</h4>
    <h5>这是标题5</h5>
    <h6>这是标题6</h6>
    <p>hello jikexueyuan</p>
    hello
    <a href="https://www.taobao.com" alt="淘宝" title="淘宝">淘宝网</a>
    <img src="res/red.png" alt="red">

    <p>hello world</p>
    hello <br/>
    world
    <a href="second.html" target="_self" >打开本地</a>
    <img src="../images/steam.png" id="img" alt="steam" title="steampng"/>
    <button id="btn1" onclick="repeat('repeat-x')">btn-x</button>
    <button id="btn2" onclick="repeat('repeat-y')">btn-y</button>
    <button id="btn3" onclick="repeat('repeat')">btn-all</button>
    <button id="btn4" onclick="repeat('no-repeat')">btn-no</button>
    <img src="../images/steam.png" id="img">
    <div>
        <canvas id="canvas" width="500px" height="500px"></canvas>
    </div>
    <div>
        <form name="test" method="POST" action="">
            <div>
               <span>姓名：<input type="text" name="name" id="name" placeholder="昵称"/></span>
            </div>
            <div>
                密码：<input type="password" name="pwd" id="pwd" placeholder="密码"/>
            </div>
            <div>
                性别：
                男<input type="radio" name="sex" id="sex-man">
                女<input type="radio" name="sex" id="sex-woman">
            </div>
            <div>
                婚姻状况：
                未婚 <input type="radio" name="marriage" id="marriage-notYet">
                已婚 <input type="radio" name="marriage" id="marriaged">
            </div>
            <div>
                爱好：
                运动<input type="checkbox" name="hobby" id="sports">
                聊天<input type="checkbox" name="hobby" id="bb">
                玩游戏<input type="checkbox" name="hobby" id="play-games">
            </div>
            <div>
                出生年月
                <select name="birthday" id="birthday">
                    <option value="" disabled>请选择...</option>
                    <option value="1991" selected>1991</option>
                    <option value="1992">1992</option>
                    <option value="1993">1993</option>
                    <option value="1994">1994</option>
                    <option value="1995">1995</option>
                </select>年
            </div>
            <div>
                <textarea name="" id="" cols="30" rows="10" placeholder="请输入"></textarea>
            </div>
            <div>
                <input type="submit" id="submit" value="提交" />&nbsp;&nbsp;
                <input type="reset" id="reset" value="重置"/>
            </div>
        </form>
    </div>
    <div style="width: 100px; height: 100px; background: rgba(255,0,0,0.5); float: left;">
    </div>
    <div style="background: #ff0">
        难道你们以为是21吗难道你们以为是21吗asdasdasdasddddddddddddddddddddddddddddddddddddd枯了 本来以为100了终于没有风袖圣手怪了枯了 本来以为100了终于没有风袖圣手怪了枯了 本来以为100了终于没有风袖圣手怪了
        【活跃】一千年随风一 2018/12/19 18:06:38
        对
        【活跃】四合一 霜影影 2018/12/19 18:06:59
        枯了 本来以为100了终于没有风袖圣手怪了
        2018/12/19 19:27:30
        【管理员】猩红猪猪侠 2018/12/19 19:27:30
        https://www.bilibili.com/video/av38484977/
        【管理员】猩红猪猪侠 2018/12/19 19:27:34
        做了个混剪
        【管理员】猩红猪猪侠 2018/12/19 19:28:01
        当自己视频ed难道你们以为是21吗
        【活跃】一千年随风一 2018/12/19 18:06:38
        对
        【活跃】四合一 霜影影 2018/12/19 18:06:59
        枯了 本来以为100了终于没有风袖圣手怪了
        2018/12/19 19:27:30
        【管理员】猩红猪猪侠 2018/12/19 19:27:30
        https://www.bilibili.com/video/av38484977/
        【管理员】猩红猪猪侠 2018/12/19 19:27:34
        做了个混剪
        【管理员】猩红猪猪侠 2018/12/19 19:28:01
        当自己视频ed
        【活跃】一千年随风一 2018/12/19 18:06:38
        对
        【活跃】四合一 霜影影 2018/12/19 18:06:59
        枯了 本来以为100了终于没有风袖圣手怪了
        2018/12/19 19:27:30
        【管理员】猩红猪猪侠 2018/12/19 19:27:30
        https://www.bilibili.com/video/av38484977/
        【管理员】猩红猪猪侠 2018/12/19 19:27:34
        做了个混剪
        【管理员】猩红猪猪侠 2018/12/19 19:28:01
        当自己视频ed
    </div>
    <h1>
        我是真他妈帅啊
    </h1>
    <script>
        var c = document.getElementById('canvas')
        var ctx = c.getContext('2d')
        ctx.fillStyle = '#ff0000'
        ctx.arc(100,100,50,0,2*Math.PI)
        ctx.fill()
        ctx.globalCompositeOperation = 'xor'
        ctx.fillStyle = '#0000ff'
        ctx.fillRect(100,100,100,50)
    </script>
</body>
</html>